<template>
  <div class="dashboard-container">
    <el-row
      :gutter="20"
      class="mb-3"
    >
      <el-col :span="6">
        <el-card
          class="stat-card clickable"
          @click="goTo('bike')"
        >
          <div class="stat">
            <div class="stat-title">
              单车总数
            </div><div class="stat-value">
              320
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card
          class="stat-card clickable"
          @click="goTo('user')"
        >
          <div class="stat">
            <div class="stat-title">
              活跃用户
            </div><div class="stat-value">
              128
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card
          class="stat-card clickable"
          @click="goTo('order')"
        >
          <div class="stat">
            <div class="stat-title">
              今日订单
            </div><div class="stat-value">
              56
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card
          class="stat-card clickable"
          @click="goTo('maintenance')"
        >
          <div class="stat">
            <div class="stat-title">
              待维修
            </div><div class="stat-value">
              8
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row
      :gutter="20"
      class="mb-3"
    >
      <el-col :span="16">
        <el-card>
          <template #header>
            单车使用趋势
            <el-button
              size="small"
              style="float:right;"
              @click="refreshChart"
            >
              刷新
            </el-button>
          </template>
          <div
            ref="chartRef"
            class="chart-box"
          />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            公告栏
            <el-button
              size="small"
              style="float:right;"
              @click="noticeCollapse = !noticeCollapse"
            >
              {{ noticeCollapse ? '展开' : '收起' }}
            </el-button>
          </template>
          <el-timeline v-show="!noticeCollapse">
            <el-timeline-item
              timestamp="09:00"
              placement="top"
            >
              今日校园单车维护时间为14:00-16:00
            </el-timeline-item>
            <el-timeline-item
              timestamp="08:00"
              placement="top"
            >
              请勿将单车停放在教学楼门口
            </el-timeline-item>
            <el-timeline-item
              timestamp="昨天"
              placement="top"
            >
              新增10辆单车投入使用
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            单车类型分布
            <el-button
              size="small"
              style="float:right;"
              @click="refreshPie"
            >
              刷新
            </el-button>
          </template>
          <div
            ref="pieRef"
            class="chart-box"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            宣传栏
          </template>
          <el-carousel
            height="180px"
            indicator-position="outside"
          >
            <el-carousel-item
              v-for="item in banners"
              :key="item"
            >
              <img
                :src="item"
                class="banner-img"
              >
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'

const router = useRouter()
const banners = [
  'https://preview.qiantucdn.com/auto_machine/20250429/6cba63e7-a4c3-44cf-8474-6034dbb1b419.jpg!qt1024_1',
  'https://preview.qiantucdn.com/58pic/pK/da/Rx/MX/yoez8dgrbcvu1ks5jwlq769240htxamp_PIC2018.png!qt1024_1',
  'https://preview.qiantucdn.com/58pic/9r/Pf/ol/dY/h4npmjyoeiqstv7du036f9a5gw8r2kl1_PIC2018.png!qt1024_1'
]
const chartRef = ref()
const pieRef = ref()
const noticeCollapse = ref(false)
let chartInstance: echarts.ECharts | null = null
let pieInstance: echarts.ECharts | null = null

function goTo(page: string) {
  router.push('/' + page)
}

function renderChart() {
  chartInstance = echarts.init(chartRef.value)
  chartInstance.setOption({
    title: { text: '单车使用统计' },
    tooltip: {},
    xAxis: { data: ['周一','周二','周三','周四','周五','周六','周日'] },
    yAxis: {},
    series: [{
      name: '使用量',
      type: 'line',
      data: [120, 200, 150, 80, 70, 110, 130].map(v => v + Math.floor(Math.random()*20))
    }]
  })
}

function renderPie() {
  pieInstance = echarts.init(pieRef.value)
  pieInstance.setOption({
    tooltip: {},
    legend: { data: ['山地车', '公路车', '电动单车'] },
    series: [{
      name: '类型分布',
      type: 'pie',
      radius: '60%',
      data: [
        { value: 180 + Math.floor(Math.random()*20), name: '山地车' },
        { value: 100 + Math.floor(Math.random()*20), name: '公路车' },
        { value: 40 + Math.floor(Math.random()*20), name: '电动单车' }
      ]
    }]
  })
}

function refreshChart() {
  if (chartInstance) chartInstance.dispose()
  renderChart()
}

function refreshPie() {
  if (pieInstance) pieInstance.dispose()
  renderPie()
}

onMounted(() => {
  renderChart()
  renderPie()
})
</script>

<script lang="ts">
export default { name: 'DashboardPage' }
</script>

<style scoped>
.dashboard-container { padding: 0; }
.mb-3 { margin-bottom: 24px; }
.stat { text-align: center; }
.stat-title { color: #888; font-size: 14px; }
.stat-value { font-size: 28px; font-weight: bold; margin-top: 8px; }
.chart-box { width: 100%; height: 240px; }
.banner-img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; }
.stat-card { cursor: pointer; transition: box-shadow .2s; }
.stat-card:hover { box-shadow: 0 4px 16px #b3b3b3; }
.clickable { user-select: none; }
</style> 